/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

/**
 * 解除绑定弹窗
 *  */

import React, { useCallback, useState, useRef } from "react";
import { Row, Col, Button, Modal, message } from "antd";
import { connect } from "dva";
import Qrcode from "@/components/KbQrcode";

const UnbindRelationModal = props => {
  const { visible = false, showModal = () => {}, platformList = {}, dispatch } = props;
  const { weixin = {}, weixin_mini = {} } = platformList;

  const [showQrCode, setShowQrCode] = useState(false);
  const [currentPlatform, seCurrentPlatform] = useState();
  const sceneId = useRef();

  const onUnBindClick = useCallback(({ platform } = {}) => {
    seCurrentPlatform(platform);
    setShowQrCode(true);
  }, []);

  const getQrcodeUrl = useCallback(
    platform =>
      dispatch({
        type: "wxSettings/getUnBindQrCode",
        payload: {
          platform,
        },
      }).then((res = {}) => {
        const { unBindSceneId } = res;
        sceneId.current = unBindSceneId;
        return new Promise(resolve => {
          resolve(res);
        });
      }),
    [dispatch]
  );

  const onCancel = useCallback(
    () => {
      showModal(false);
      setShowQrCode(false);
    },
    [showModal]
  );

  const checkUnbindResult = useCallback(
    sceneId => {
      dispatch({
        type: "wxSettings/checkUnBindScan",
        payload: {
          sceneId,
        },
      }).then(res => {
        const { msg, code } = res || {};
        if (code == 0) {
          message.success(msg);
          // 更新绑定的平台
          dispatch({
            type: "platform/getPlatformList",
          });
          onCancel();
        } else {
          message.error(msg);
        }
      });
    },
    [dispatch, onCancel]
  );

  const checkUnBindScan = useCallback(
    (stopLoop, sceneId) => {
      dispatch({
        type: "platform/checkScanCodeStatus",
        payload: {
          sceneId,
        },
        then: ({ data, code }) => {
          if (code == 0 && data == 1) {
            stopLoop();
            checkUnbindResult(sceneId);
          } else if (code == 1) {
            // 二维码失效
            stopLoop();
          }
        },
      });
    },
    [dispatch, checkUnbindResult]
  );

  return (
    <Modal
      centered
      destroyOnClose
      visible={visible}
      title="解绑关联"
      onCancel={onCancel}
      footer={null}
    >
      {showQrCode ? (
        <Row style={{ width: "100%", textAlign: "center" }}>
          <Col>
            <Qrcode
              getUrl={() => getQrcodeUrl(currentPlatform)}
              getScan={stopLoop => checkUnBindScan(stopLoop, sceneId.current)}
            />
          </Col>
          <Col>管理员扫描上方二维码进行解绑</Col>
        </Row>
      ) : (
        <>
          <Row type="flex" justify="space-between" align="middle" style={{ width: "100%" }}>
            <Col>
              <Row type="flex">
                <Col>微信公众号：</Col>
                <Col>{weixin.platformName}</Col>
              </Row>
            </Col>
            <Col>
              <Button type="danger" ghost onClick={() => onUnBindClick(weixin)}>
                解绑
              </Button>
            </Col>
          </Row>
          <Row
            type="flex"
            justify="space-between"
            align="middle"
            style={{ width: "100%", marginTop: 20 }}
          >
            <Col>
              <Row type="flex">
                <Col>微信小程序：</Col>
                <Col>{weixin_mini.platformName}</Col>
              </Row>
            </Col>
            <Col>
              <Button type="danger" ghost onClick={() => onUnBindClick(weixin_mini)}>
                解绑
              </Button>
            </Col>
          </Row>
        </>
      )}
    </Modal>
  );
};

export default connect(({ platform }) => ({
  platformList: platform.platformList,
}))(UnbindRelationModal);
